<template lang="pug">
    transition(name="fade")
        .summarize(v-show="show")
            h1 列表
                .search()
                    img(:src="searchIcon")
                    input(placeholder="搜索")
                    .button 搜索
            ul
                li
                    div 名字
                    div 年龄
                    div 显示详细
                li(v-for="(item,index) in list" :key="index").content-list
                    span {{item.name}}
                    span {{item.age}}
                    span(@click="showDetail(index)") 详情
                .page-number
                    span.previous  上一页
                    span.next 下一页
</template>

<script>
export default {
  name: "Summarize",
  data() {
    return {
      searchIcon: require("../../../public/icon/list/search-icon.png"),
      list: {},
      show: true
    };
  },
  mounted() {
    this.list = this.getListData;
  },
  methods: {
    // 将detail的坐标存入
    showDetail(index) {
      this.$store.commit("changeDetail", index);
      this.$store.commit("ShowDetail", true);
    }
  },
  computed: {
    getListData() {
      return this.$store.state.list;
    },
    isShowDetail() {
      return this.$store.state.isShowDetail;
    }
  },
  watch: {
    getListData(val) {
      this.list = val;
    },
    isShowDetail(val) {
      this.show = !val;
    }
  }
};
</script>

<style scoped lang="stylus">
    .fade-enter-active
        transition: 1s

    .fade-leave-active
        transition: 0s

    .fade-enter, .fade-leave-to
        transform: translateX(10px);
        opacity: 0;

    .summarize
        h1
            padding 20px
            display flex
            justify-content space-between
            .search
                display inline-block
                border-radius 10px
                border 1px solid black
                box-shadow 1px 1px 5px gray
                img
                    width: 20px
                    height: 20px
                    padding-left 5px
                input
                    padding-left 5px
                    vertical-align top
                    outline none
                    border none
                    height 100%
                    line-height 100%
                .button
                    display inline-block
                    width 50px
                    height 40px
                    line-height 40px
                    color: white
                    vertical-align top
                    border-radius 0 8px 8px 0
                    background-color black
                    font-size 15px
                    cursor: pointer
        ul
            padding 0 20px
            list-style-type none
            li
                display flex
                justify-content space-around
                border-top 1px solid gray
                &:last-of-type
                    border-bottom 1px solid gray
                div
                    display inline-block
                    height:50px
                    line-height 50px
                    width 30%
                    border-right 1px gray solid
                    &:last-of-type
                        border-right none
                span
                    height:50px
                    line-height 50px
                    width 30%
                    border-right 1px gray solid
                    &:last-of-type
                        border-right none
                        cursor pointer
                        &:hover
                            text-decoration underline
        .page-number
            padding 20px
            display flex
            justify-content flex-end
            span
                cursor pointer
                background-color chocolate
                margin-right 20px
                width 40px
                height 40px
                line-height 40px
                color white
                font-size 13px
                border-radius 50%
                box-shadow 1px 1px 8px grey
                &:active
                    box-shadow none
                &:last-of-type
                    background-color goldenrod
</style>
